<template>
    <div class="container yuan-container order-list">

        <a-card title="订单列表">
            <div class="filter-panel">
                <div class="filter-list">
                    <span>商品信息：</span>
                    <a-input-search allowClear v-model="pageParams.goodsSearchCondition" placeholder="商品编号/商品名称"
                        @search="resetList" />
                </div>
                <div class="filter-list">
                    <span>订单编号：</span>
                    <a-input-search allowClear v-model="pageParams.orderNo" placeholder="订单编号" @search="resetList" />
                </div>
                <div class="filter-list">
                    <span>收货人信息：</span>
                    <a-input-search allowClear v-model="pageParams.consigneeSearchCondition" placeholder="收货人名称/电话"
                        @search="resetList" />
                </div>
                <div class="filter-list">
                    <span>下单时间：</span>
                    <a-range-picker @change="dateChange" :placeholder="['开始日期','结束日期']" :format="['YYYY-MM-DD','YYYY-MM-DD']" />
                </div>

            </div>
            <div class="filter-panel">
                <div class="filter-row">
                    <span class="filter-row-title">订单状态：</span>
                    <span class="filter-row-list" :class="pageParams.orderType===''&&'c-primary'"
                        @click="clickOrderType('')">全部订单</span>
                    <span class="filter-row-list" :class="pageParams.orderType==='1'&&'c-primary'"
                        @click="clickOrderType('1')">待付款</span>
                    <span class="filter-row-list" :class="pageParams.orderType==='2'&&'c-primary'"
                        @click="clickOrderType('2')">待发货</span>
                    <span class="filter-row-list" :class="pageParams.orderType==='3'&&'c-primary'"
                        @click="clickOrderType('3')">待收货</span>
                    <span class="filter-row-list" :class="pageParams.orderType==='4'&&'c-primary'"
                        @click="clickOrderType('4')">已完成</span>
                    <span class="filter-row-list" :class="pageParams.orderType==='5'&&'c-primary'"
                        @click="clickOrderType('5')">售后中</span>
                    <span class="filter-row-list" :class="pageParams.orderType==='6'&&'c-primary'"
                        @click="clickOrderType('6')">已取消</span>
                </div>
            </div>
            <div class="table">
                <a-table bordered :loading="loading" :rowKey="(item,i)=>item.id+'_'+i" :columns="columns" :data-source="pageList"
                    :pagination="pagination">
                    <template slot='action' slot-scope="text, record, index">
                        <div>
                            <a-button type="warning" @click="clickEdit(record)" v-if="$checkPer(['orderDetailQuery'])">查看订单</a-button>
                            <!-- <a-button type="primary" @click="clickEdit(record)">关闭交易</a-button> -->
                            <a-button type="primary" @click="clickSend(record)"
                                v-if="record.status===2 && userInfo.type==='ORGAN' && $checkPer(['orderDeliver'])">马上发货</a-button>

                        </div>
                    </template>
                </a-table>
            </div>
        </a-card>
        <DetailVue :visible="detailVisible" @closeModal="() => detailVisible = false" :editInfo="editInfo" :isShow="true"
            @resetList="resetList" />

        <a-modal width="600px" title="物流信息" :visible="sendVisible" @ok="sendOk" @cancel="sendCancel" okText="确定" cancelText="取消">
            <a-spin tip="Loading..." :spinning="sendLoading">
                <a-form-model layout="inline" class="yuan-form" :label-col="{ style: { width: '100px' } }"
                    :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">

                        <a-form-model-item label="物流公司" prop="number">
                            <a-input v-model="sendInfo.logisticsName" placeholder="请输入物流公司" />
                        </a-form-model-item>
                        <a-form-model-item label="物流单号" prop="number">
                            <a-input v-model="sendInfo.logisticsId" placeholder="请输入物流单号" />
                        </a-form-model-item>
                    </div>
                </a-form-model>
            </a-spin>
        </a-modal>
    </div>
</template>
<script lang="ts">
import api from "@/api/api";
import shopMallApi from "@/api/shopMallApi";
import { format, getStorageUserInfo, toYuan } from "@/utils";
import { h } from "vue";
import { Component, Vue } from "vue-property-decorator";
import DetailVue from "./orderDetail.vue";
@Component({
    name: "tpl",
    components: { DetailVue },
})
export default class extends Vue {
    loading = false;
    pageList = [{ name: "测试商品" }];
    pagination = {
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: this.pageChange,
    };
    pageParams: any = {
        goodsSearchCondition: "",
        orderNo: "",
        consigneeSearchCondition: "",
        orderType: "",
    };
    columns = [
        {
            align: "center",
            dataIndex: "orderNo",
            key: "orderNo",
            title: "订单编号",
            width:290
        },
        {
            align: "center",
            dataIndex: "name",
            key: "name",
            title: "下单时间",
            customRender: (text: string, record: any, index: number) => {
                return format(record.placeOrderTime);
            },
        },
        {
            align: "center",
            dataIndex: "paymentTime",
            key: "paymentTime",
            title: "支付时间",
            customRender: (text: string, record: any, index: number) => {
                return format(record.paymentTime);
            },
        },
        {
            align: "center",
            dataIndex: "goodsNames",
            key: "goodsNames",
            title: "商品名称",
        },
        {
            align: "center",
            dataIndex: "consigneeName",
            key: "consigneeName",
            title: "收货人信息",
            customRender: (text: string, record: any, index: number) => {
                const dom = h("div", {}, record.consigneeName + " " + record.phone);
                const dom1 = h("div", {}, "地址：" + record.detailInfo);
                return [dom, dom1];
            },
        },
        {
            align: "center",
            dataIndex: "paymentPrice",
            key: "paymentPrice",
            title: "订单金额",
            customRender: (text: string, record: any, index: number) => {
                const dom = h("div", {}, toYuan(record.paymentPrice));
                return dom;
            },
        },
        {
            align: "center",
            dataIndex: "totalQuantity",
            key: "totalQuantity",
            title: "商品数量",
        },
        {
            align: "center",
            dataIndex: "status",
            key: "status",
            title: "订单状态",
            width: 100,
            customRender: (text: string, record: any, index: number) => {
                if(record.status===5 && (record.refundApplyStatus===6 || record.refundApplyStatus===7)){
                    return h("div", { class: 'status-words c-primary' }, '退换-售后');
                }
                const data = {
                    0: { title: "", class: "status-words c-warning" },
                    1: { title: "待付款", class: "status-words c-primary" },
                    2: { title: "待发货", class: "status-words c-warning" },
                    3: { title: "已发货", class: "status-words c-success" },
                    4: { title: "已完成", class: "status-words c-success" },
                    5: { title: "售后中", class: "status-words c-danger" },
                    6: { title: "已取消", class: "status-words c-danger" },
                };
                const dataOne = data[record.status] || {};

                const dom = h("div", { class: dataOne.class }, dataOne.title);
                return dom;
            },
        },
        {
            align: "center",
            dataIndex: "refundApplyStatus",
            key: "refundApplyStatus",
            title: "售后状态",
            width: 100,
            customRender: (text: string, record: any, index: number) => {
                const refundArr = {
                    0: { title: "-", class: "status-words" },
                    1: { title: "待审核", class: "status-words c-success" },
                    2: { title: "待退货", class: "status-words c-warning" },
                    3: { title: "已拒绝", class: "status-words c-danger" },
                    4: { title: "待退货", class: "status-words c-warning" },
                    5: { title: "用户退货中", class: "status-words c-primary" },
                    6: { title: "退款完成", class: "status-words c-primary" },
                    7: { title: "退款失败", class: "status-words c-danger" },
                };
                const dataOne = refundArr[record.refundApplyStatus || 0] || {};
                const dom = h("div", { class: dataOne.class }, dataOne.title);
                return dom;
            },
        },

        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 220,
            scopedSlots: { customRender: "action" },
        },
    ];
    async getList() {
        this.pageList = [];
        this.loading = true;
        try {
            const res = await shopMallApi.getOrderList({
                ...this.pageParams,
                status: this.pageParams.orderType,
                pageSize: this.pagination.pageSize,
                pageNum: this.pagination.current,
                searchContent: this.pageParams.keywords,
            });
            this.pageList = res.data?.rows || [];
            this.pagination.total = res.data?.total || 0;
        } finally {
            this.loading = false;
        }
    }
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;
        this.getList();
    }
    userInfo = {};
    mounted() {
        this.userInfo = getStorageUserInfo();
        this.getList();
    }

    detailVisible = false;
    editInfo = {};
    async clickEdit(item) {
        this.loading = true;
        try {
            const res = await shopMallApi.findOrderDetailsInfo({ orderId: item.id });
            this.editInfo = res.data;
            this.detailVisible = true;
        } finally {
            this.loading = false;
        }
    }

    async clickDelete(item) {
        this.loading = true;
        try {
            // await api.deleteResourceAbutment(item.id);
            // this.$message.success("删除成功");
            // this.getList();
        } finally {
            this.loading = false;
        }
    }
    dateChange(e: any[]) {
        const arr = e.map((item) => item.format("YYYY-MM-DD"));
        this.pageParams.placeOrderBeginTime = arr[0];
        this.pageParams.placeOrderEndTime = arr[1];
        this.resetList();
    }

    clickOrderType(type: string) {
        this.pageParams.orderType = type;
        this.resetList();
    }
    sendInfo = {
        id: "",
        logisticsName: "",
        logisticsId: "",
    };
    sendVisible = false;
    sendLoading = false;
    clickSend(item) {
        this.sendInfo.logisticsName = "";
        this.sendInfo.logisticsId = "";
        this.sendInfo.id = item.id;
        this.sendVisible = true;
    }
    async sendOk() {
        if (this.sendInfo.logisticsName === "") {
            this.$message.warning("请输入物流公司名称");
            return;
        }
        if (this.sendInfo.logisticsId === "") {
            this.$message.warning("请输入物流单号");
            return;
        }
        this.sendLoading = true;
        try {
            const res = await shopMallApi.deliverGoods({
                ...this.sendInfo,
            });
            this.sendVisible = false;
            this.$message.success(res.msg);
            this.resetList();
        } finally {
            this.sendLoading = false;
        }
    }
    sendCancel() {
        this.sendVisible = false;
    }
}
</script>
<style scoped lang="scss">
.goods-list {
}
</style>
